<template>
	<view class="box">
		<view class="top flex flex-two flex-itemCenter">
			<view class="date flex flex-itemCenter">
				<image src="../../static/countDown.png" class="wh30"></image>
				<view class="ml20">
					<u-count-down :time="60 * countdownTime * 1000" format="HH:mm:ss" @finish='timeFinis'>
					</u-count-down>
				</view>
			</view>
			<view class="button flex flex-itemCenter" @click="show=true">
				<image src="../../static/submitExam.png" class="wh30"></image>
				<text class="ml10">交卷</text>
			</view>
		</view>
		<view class="pt130">
			<swiper class="swiper">
				<swiper-item v-for="(item,index) in examLest" :key="item.questionid">
					<view class="ptb50 plr60 box-size">
						<view class="flex flex-two">
							<view class="type" v-if="item.questiontype==1">单选题</view>
							<view class="type" v-else-if="item.questiontype==2">多选题</view>
							<view class="type" v-else>判断题</view>
							<view>
								<text>{{index+1}}</text>
								<text class="fs24 c9a">/{{itemCount}}</text>
							</view>
						</view>
						<view class="question mt20 mb50 fs32">
							<text>{{item.questioncontent}}</text>
						</view>
						<view>
							<!-- 单选 -->
							<view v-if="item.questiontype == 1 || item.questiontype == 3">
								<view v-for="(items, indexs) in item.answeroptions" :key="indexs">
									<u-radio-group v-model="radiovalue[index]" placement="column">
										<u-radio :customStyle="{marginBottom: '40rpx'}" :label="items" :name="items"
											@change="radioChange(items,index)">
										</u-radio>
									</u-radio-group>
								</view>
							</view>
							<!-- 多选 -->
							<view v-if="item.questiontype == 2">
								<u-checkbox-group v-model="checkboxValue[index]" placement="column">
									<view v-for="(items, indexs) in item.answeroptions" :key="indexs">
										<u-checkbox :customStyle="{marginBottom: '40rpx'}" shape="circle" :label="items"
											:name="items" @change="checkChange(items,index)">
										</u-checkbox>
									</view>
								</u-checkbox-group>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup :show="show" mode="center" @close="show=false">
			<view class="popup">
				<view class="mb50">您是否确定提交,提交后无法修改</view>
				<view class="flex flex-two">
					<button class="btn but1" @click="show=false">取消</button>
					<button :disabled="butFlag" class="btn but2" @click="submit">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				examLest: [],
				testId: '0',
				questionIndex: [],
				show: false,
				itemCount: 0,
				// 倒计时时间
				countdownTime: null,
				// 考试答案集合
				topicArr: [],
				// 单选框数据
				radiovalue: [],
				// 多选框数据
				checkboxValue: [],
				// 现在时间
				nowTime: null,
				// 组织多次点击
				butFlag: false,
			}
		},
		onLoad(e) {
			if (e) {
				this.testId = JSON.parse(e.data).id
				this.countdownTime = JSON.parse(e.data).timeLimit
				this.startExam()
			}
		},
		methods: {
			async startExam() {
				let {
					resultValue: res
				} = await this.request(this.$api.startExam + '/' + this.testId, {}, 'GET')
				this.nowTime = res.now
				this.examLest = res.items
				this.itemCount = res.itemCount
				for (let i = 0; i < res.itemCount; i++) {
					this.topicArr.push('')
				}
			},
			select(item, testIndex) {
				this.$set(this.questionIndex, testIndex, item)
			},
			// 单选框改变
			radioChange(val, index) {
				let a = val.trim().slice(0, 1)
				this.topicArr[index] = a
				console.log(this.topicArr)
			},
			// 多选框改变
			checkChange(val, index) {
				let a = val.trim().slice(0, 1)
				this.topicArr[index] = this.topicArr[index] ? this.topicArr[index] : ''
				console.log(a, this.topicArr[index])
				if (this.topicArr[index].indexOf(a) !== -1) {
					let b = this.topicArr[index].replace(a, '')
					this.topicArr[index] = b
				} else {
					this.topicArr[index] += a
				}
				console.log(this.topicArr)
			},
			timeFinis() {
				this.submit()
			},
			submit() {
				let that = this
				let params = {
					busId: that.testId,
					startDate: that.nowTime,
					answerData: that.topicArr
				}
				that.request(that.$api.saveExam, params, 'POST').then((res) => {
					if (res.code == 200) {
						// 清空
						that.topicArr = []
						// 关闭弹框
						that.show = false
						uni.$u.toast('考试提交成功！请等待考试结束，查询结果！')
						// 防止一直点击确定按钮
						this.butFlag = true
						setTimeout(() => {
							var pages = getCurrentPages(); // 当前页面
							var beforePage = pages[pages.length - 2]; // 前一个页面
							uni.navigateBack({
								success: function() {
									beforePage.$vm.init(); // 执行前一个页面的方法
								}
							})
						}, 1000)
					} else {
						// 关闭弹框
						that.show = false
						uni.$u.toast(res.resultHint)
					}
				})

			}
		}
	}
</script>

<style scoped>
	.box {
		height: 100vh;
		background-color: #FFFFFF;
	}

	.top {
		box-sizing: border-box;
		position: fixed;
		z-index: 520;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0 11px 25px 0 rgba(62, 65, 69, 0.06);
		border-radius: 0 0 10px 10px;
		padding: 20rpx 30rpx;
	}

	.date {
		height: 40rpx;
		line-height: 40rpx;
		font-family: PingFangSC-Medium;
		font-weight: Medium;
		font-size: 14px;
		color: #65717D;
	}

	.button {
		box-sizing: border-box;
		width: 90px;
		height: 28px;
		background: #3473F9;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 28rpx;
		justify-content: center;
	}

	.type {
		font-size: 24rpx;
		text-align: center;
		color: #3473F9;
		width: 100rpx;
		height: 45rpx;
		line-height: 45rpx;
		background: #E4EDFF;
		border-radius: 4px;
	}

	uni-swiper {
		box-sizing: border-box;
		height: 80vh !important;
	}

	swiper {
		box-sizing: border-box;
		height: 80vh !important;
	}

	.question {
		color: #414A53;
		font-family: PingFangSC-Medium;
		font-weight: Medium;
		line-height: 60rpx;
	}

	.option {
		margin-right: 30rpx;
		border-radius: 50%;
		text-align: center;
		width: 76rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #FFFFFF;
		transition: all .2s;
	}

	.opNo {
		border: 1px solid #EFF0F4;
		color: #65717D;
	}

	.opYes {
		border: 1px solid #3473F9;
		background: #3473F9;
		color: #FFFFFF;
	}

	.optext {
		color: #65717D;
	}

	>>>.u-popup__content {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.popup {
		font-size: 32rpx;
		width: 600rpx;
		box-sizing: border-box;
		padding: 60rpx;
	}

	.btn {
		box-sizing: border-box;
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		border-radius: 14rpx;
	}

	.but1 {
		border: 1px solid #3473F9;
		color: #3473F9;
	}

	.but2 {
		background-color: #3473F9;
		color: #FFFFFF;
	}

	>>>.u-radio__text {
		margin: -4rpx 0 0 20rpx;
		word-wrap: break-word;
	}
</style>
